<template>
    <div>
        <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" >
            <el-menu-item index="1">系统</el-menu-item>
            <el-menu-item index="2">模版</el-menu-item>
            <el-menu-item index="3">素材</el-menu-item>
            <el-menu-item index="4">作品</el-menu-item>
        </el-menu>

        <System v-if="activeIndex==='1'"></System>
        <Template v-else-if="activeIndex==='2'"></Template>
        <Material v-else-if="activeIndex==='3'">
        </Material>
        <Draft v-else></Draft>
    </div>

</template>

<script>
    import Material from "../components/Material";
    import System from "../components/System";
    import Template from "../components/Template";
    import Draft from "../components/Draft";
    export default {
        name: "Home",
        components:{
          Material,
          System,
          Template,
          Draft
        },
        data:function () {
           return{
            activeIndex:'1'
           }
        },
        methods:{
            handleSelect:function(value){
                this.activeIndex=value
            }
        }
    }
</script>

<style scoped>

</style>
